<template>
  <div class="evaluation-container">
    <div class="header">
      <a href="javascript:void(0)" @click="$router.go(-1)" class="back-button">
        <img src="./me-img/back.png" alt="返回" width="40%" height="100%" />
      </a>
      <img src="./me-img/logo.png" alt="logo" class="logo" />
    </div>

    <div class="body">
      <div class="product-info">
        <img :src="product.image" alt="商品图片" class="product-image" />
        <div class="product-details">
          <h4 class="product-name">{{ product.name }}</h4>
          <p class="product-specs">{{ product.specs }}</p>
        </div>
      </div>

      <div class="evaluation-form">
        <div class="rating-options">
          <button
            v-for="option in ratingOptions"
            :key="option.value"
            :class="['rating-btn', { active: selectedRating === option.value }]"
            @click="selectedRating = option.value"
          >
            {{ option.label }}
          </button>
        </div>

        <textarea
          v-model="commentText"
          placeholder="亲，写点评价吧，你的评价对其他买家有很大帮助的。"
          class="comment-input"
        ></textarea>

        <div class="image-upload">
          <button class="upload-btn" @click="triggerFileInput">
            <span>添加图片</span>
            <span class="image-count">({{ images.length }}/5)</span>
          </button>
          <input
            type="file"
            ref="fileInput"
            @change="handleImageUpload"
            multiple
            accept="image/*"
            style="display: none"
          />
          <div class="preview-images">
            <div
              v-for="(image, index) in images"
              :key="index"
              class="image-preview"
            >
              <img :src="image.url" alt="预览图片" />
              <button @click="removeImage(index)" class="remove-image">
                ×
              </button>
            </div>
          </div>
        </div>

        <button class="submit-btn" @click="submitEvaluation">发表评论</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "evaluation",
  data() {
    return {
      product: {},
      selectedRating: "good",
      commentText: "",
      images: [],
      ratingOptions: [
        { value: "good", label: "好评" },
        { value: "medium", label: "中评" },
        { value: "bad", label: "差评" },
      ],
    };
  },
  created() {
    // 从路由参数获取商品信息
    if (this.$route.query.product) {
      this.product = JSON.parse(this.$route.query.product);
    }
  },
  methods: {
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    handleImageUpload(e) {
      const files = e.target.files;
      if (files.length + this.images.length > 5) {
        alert("最多只能上传5张图片");
        return;
      }

      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();
        reader.onload = (e) => {
          this.images.push({
            file: file,
            url: e.target.result,
          });
        };
        reader.readAsDataURL(file);
      }
    },
    removeImage(index) {
      this.images.splice(index, 1);
    },
    submitEvaluation() {
      if (!this.commentText.trim()) {
        alert("请填写评价内容");
        return;
      }

      // 显示评价成功提示框
      if (confirm("评价成功！点击确定返回")) {
        // 删除已评价的订单
        const orderList = JSON.parse(localStorage.getItem("orderList") || "[]");
        const updatedOrders = orderList.filter(
          (item) => item.id !== this.product.id
        );

        localStorage.setItem("orderList", JSON.stringify(updatedOrders));
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style scoped>
.evaluation-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  min-width: 1000px;
  overflow-x: auto;
}

.header {
  background-color: #f4efd2;
  height: 50px;
  align-items: center;
  box-shadow: #bdbbb7 0px 2px 8px;
  padding: 2px 0px;
}

.header,
.body {
  width: 60%;
  margin: 0px auto;
  overflow: hidden;
  display: flex;
}

.body {
  margin: 30px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.logo {
  width: 10%;
  height: auto;
  margin-left: auto;
}

.back-button {
  color: #333;
  display: flex;
  width: 10%;
  height: 100%;
  text-decoration: none;
  line-height: 40px;
  overflow: hidden;
}

.product-info {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.product-image {
  width: 120px;
  height: 120px;
  border-radius: 5px;
  margin-right: 20px;
}

.product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-name {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.product-specs {
  font-size: 14px;
  color: #666;
}

.evaluation-form {
  padding: 0 20px;
}

.rating-options {
  display: flex;
  margin-bottom: 20px;
}

.rating-btn {
  padding: 8px 20px;
  margin-right: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.rating-btn.active {
  background-color: #d9c596;
  border-color: #d9c596;
  color: #fff;
}

.comment-input {
  width: 100%;
  height: 150px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
  resize: none;
  font-size: 14px;
}

.image-upload {
  margin-bottom: 30px;
}

.upload-btn {
  padding: 8px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

.image-count {
  margin-left: 5px;
  color: #999;
}

.preview-images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}

.image-preview {
  position: relative;
  width: 80px;
  height: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.remove-image {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background-color: rgb(237, 129, 51);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #e67a2e;
}
</style>
